{extend name="other/public"}
<link rel="stylesheet" href="/static/plug_in/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
{block name='css'}
<style>
  .layui-layout-admin .layui-footer{z-index: 999;}
  .layui-card{border:1px solid #eee;}
  .layui-tab-card{box-shadow: none;border:0;}
  .c1{position: relative;padding-bottom: 5px!important;}
  .c1 .layui-btn-group{margin-top: 5px;}
  .c2.layui-input-inline{width: 330px;position: relative;z-index: 2;}
  .c3{position: absolute;left:560px;top:-50px;width: 150px;height: 150px;}
  .c3 .c4:hover div{display: block;cursor: pointer;}
  .c3 .c4 div{display: none;transition: .2s;position: absolute;left:0;top: 0;background: rgba(0,0,0,.5);width: 100%;height: 100%;text-align: center;line-height: 160px;}
  .c3 .layui-icon{font-size: 30px;color: #fff;}
  .c4{
    flex: none;
            text-align: center;
            vertical-align: middle;
            transition: .2s;
            border:1px solid #f9f9f9;
            background-color: #eee;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 50% 50%;
  }        .c4::before,.c4::after{
            content: "";
    display: inline-block;
    padding-bottom: 100%;
    width: .1px;
    vertical-align: middle;
        }
        .c5{width: 100px;padding-left: 110px;margin-top: 10px;}
        .c6{display: flex;}
        .c6 .c4{margin-right: 8px;width: 100%;position: relative;}
        .c6 .c4:hover div{display: block;cursor: pointer;}
        .c6 .c4 div{display: none;transition: .2s;position: absolute;left:0;top: 0;background: rgba(0,0,0,.5);width: 100%;height: 100%;text-align: center;line-height: 100px;}
        .c6 .layui-icon{font-size: 30px;color: #fff;}
</style>
{/block}
{block name='content'}
<div class="layui-fluid">
  <div class="layui-card">
    <form class="layui-form" action="" lay-filter="anForm">
      <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
          <li class="layui-this">基本信息</li>
          <li>其他选项</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item">
                  <label class="layui-form-label">标题</label>
                  <div class="layui-input-block">
                    <input type="hidden" value="{$id}" name="id">
                    <input type="text" name="title"  placeholder="请输入标题" class="layui-input" value="{$pageData['title']}">
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline c2" style="z-index: 9;">
                      <select name="type">
                        <option value="">请选择分类</option>
                        {volist name="typeList" id="vo"}
                          <option value="{$vo.id}">{$vo.name}</option>
                        {/volist}
                      </select>
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">封面图</label>
                  <div class="layui-input-inline c2">
                    <input type="text" name="cover" placeholder="图片地址" class="layui-input  choice-img-input"  value="{$pageData['cover']}">
                  </div>
                  <div class="layui-word-aux c1">
                    <div class="layui-btn-group">
                      <button type="button" class="layui-btn layui-btn-sm choice-img choiceimg">选择站内图片</button>
                    </div>
                    <div class="layui-word-aux c3">
                      <!-- <div class="c4 choice-img-input" style="background-image:url(/uploads/20201030/df4fab167e0fc386599336b16673a75c.jpg)"></div> -->
                      <div class="c4 choice-img-input" style="background-image:url({$pageData['cover']})">
                        <div><i class="layui-icon layui-icon-delete"></i></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">售价</label>
                  <div class="layui-input-inline c2">
                    <input type="text" name="price" placeholder="请输入售价" class="layui-input" value="{$pageData['price']}">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">排序</label>
                  <div class="layui-input-inline c2">
                    <input type="text" name="sort" placeholder="数字越大越靠前" class="layui-input" value="{$pageData['sort']}">
                  </div>
                </div>
                <div class="layui-form-item" pane="">
                  <label class="layui-form-label">属性</label>
                  <div class="layui-input-block">
                    <input type="checkbox" value="1" name="attr_a" value="首页显示" lay-skin="primary" title="首页显示[a]">
                    <input type="checkbox" value="1" name="attr_b" value="热门" lay-skin="primary" title="热门[b]">
                    <input type="checkbox" value="1" name="attr_c" value="推荐" lay-skin="primary" title="推荐[c]">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">产品图</label>
                  <div class="layui-input-block">
                    <div class="layui-btn-group">
                      <button type="button" class="layui-btn choice-img-all">选择站内图片</button>
                    </div>
                  </div>
                  <div class="c5 c6">
                    {volist name="pageData['imgs']" id="vo"}
                        <div class="c4" style="background-image: url({$vo});" onselectstart="return false;">
                          <input type="hidden" name="imgs[]" value="{$vo}">
                          <div><i class="layui-icon layui-icon-delete"></i></div>
                        </div>
                    {/volist}
                  </div>
                </div>
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">内容详情</label>
                  <div class="layui-input-block">
                    <script id="editor" type="text/plain" style="width: 100%;height: 300px;" name="content">{$pageData['content']|raw}</script>
                    <button type="button" onclick="getAllHtml()">获得整个html的内容</button>
                    <button type="button" onclick="getContent()">获得内容</button>
                    <button type="button" onclick="getContentTxt()">获得纯文本</button>
                    <button type="button" onclick="getPlainTxt()">获得带格式的纯文本</button>
                    <button type="button" onclick="hasContent()">判断是否有内容</button>
                    <button type="button" onclick="getText()">获得当前选中的文本</button>
                    <button type="button" onclick="getLocalData()" >获取草稿箱内容</button>
                    <button type="button" onclick="clearLocalData()" >清空草稿箱</button>
                  </div>
                </div> 

                <div class="layui-form-item">
                  <label class="layui-form-label">发布</label>
                  <div class="layui-input-block">
                    <input type="radio" name="is_show" value="1" title="发布" checked>
                    <input type="radio" name="is_show" value="0" title="暂不发布">
                  </div>
                </div>       
            </div>
          </div>
          <div class="layui-tab-item">
            <div class="layui-tab-item layui-show">
              <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">SEO标题</label>
                  <div class="layui-input-block">
                    <input type="text" name="seo_title" autocomplete="off" value="{$pageData['seo_title']}" placeholder="请输入标题" class="layui-input">
                  </div>
                </div> 
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">SEO关键词</label>
                  <div class="layui-input-block">
                    <input type="text" name="seo_keywords" autocomplete="off" value="{$pageData['seo_keywords']}" placeholder="请输入标题" class="layui-input">
                  </div>
                </div> 
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">SEO描述</label>
                  <div class="layui-input-block">
                    <textarea name="seo_description" placeholder="请输入内容" class="layui-textarea">{$pageData['seo_description']|raw}</textarea>
                  </div>
                </div> 
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item layui-layout-admin">
        <div class="layui-input-block">
          <div class="layui-footer" style="left: 0;">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="closeTabPage()">取消编辑</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
{/block}

{block name='js'}
{include file="other/ueditor"}
<script>
    function closeTabPage(){
        // parent.layui.admin.events.closeThisTabs();//关闭当前标签页
        location.href="{:url('list_data')}"
    }

  layui.config({
    base: '../../../static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'upload'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,upload = layui.upload
    ,element = layui.element
    ,layer = layui.layer
    ,laydate = layui.laydate
    ,form = layui.form;


    //表单初始化赋值
    form.val("anForm", {
      "type":"{$pageData['type']}",
      "is_show":"{$pageData['is_show']}",
      "attr_a":"{$pageData['attr_a']}"=='1'?true:false,
      "attr_b":"{$pageData['attr_b']}"=='1'?true:false,
      "attr_c":"{$pageData['attr_c']}"=='1'?true:false,
    });

    tipsBox('500*500')
    tipsBox('800*800','.choice-img-all')

    $(".choice-img").click(function(){
      layer.open({
          type: 2,
          title: '选择图片',
          content: "{:url('other/img_list')}?class="+'choice-img-input&num=1',
          area: ['960px', '70%'],
          shadeClose:true,
        }); 
    })
    
    $(".choice-img-all").click(function(){
      layer.open({
          type: 2,
          title: '选择图片',
          content: "{:url('other/img_list')}?class="+'c6&num=2',
          area: ['960px', '70%'],
          shadeClose:true,
        }); 
    })

    $(".c6 ").on('click','.c4',function(){
      $(this).remove()
    })

    $(".c3 .c4").on('click',function(){
      $(this).attr('style','')
      $(".choice-img-input").val('')
    })



    /* 监听提交 */
    form.on('submit(component-form-demo1)', function(data){
      var url = "{:url('form_data')}";
      delete data.field.file;
      if(Number(data.field.id)==0){
        delete data.field.id;
        url = "{:url('form_add_data')}";
      }

      $.post(url,data.field,(res)=>{
        if(res.code == 1){
          layer.msg('操作成功，即将返回列表',{time: 1000},function(){
            location.href = "{:url('list_data')}"
          })
        }else{
          layer.msg(res.msg)
        }
      },'json')

      return false;
    });
  });



  </script>
{/block}
